<template>
  <div class="wrap">
    <div class="page-container page-container-create">
      <div class="stepset">
        <ul>
          <li :class="{'active':active>=1}">
            <span>1</span>
            <p>选择图文信息</p>
          </li>
          <li :class="{'active':active>=2}">
            <span>2</span>
            <p>选择触达方式</p>
          </li>
        </ul>
      </div>
      <div v-show="active==1">
        <el-form
          :model="grapform"
          :rules="rulesGrapform"
          size="mini"
          ref="grapform"
          label-width="150px"
        >
          <el-form-item label="图文信息类型：">
            <el-radio-group v-model="grapform.resource" class="pt6">
              <el-radio label="在线编辑" class="mr30"></el-radio>
              <el-radio label="外部链接"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图文信息标题：" class="w178 mt30">
            <el-input v-model="grapform.title" placeholder="输入图文信息标题" class="clearable"></el-input>
          </el-form-item>
          <el-form-item label="图文信息内容：">
            <el-input type="textarea" v-model="grapform.desc" class="w300"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="active==2">
        <div class="flex mt30">
          选择触达方式：
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="短信"></el-checkbox>
            <el-checkbox label="邮件"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="tab-container mt30">
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="item in tabList"
              :key="item.key"
              :label="item.label"
              :name="item.key"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div v-show="activeName=='0'">
          <el-form :model="ruleForm" size="mini" ref="ruleForm" :rules="rules">
            <el-form-item label="短信模板：" prop="smsSelect" class="w178 mt30">
              <el-select v-model="ruleForm.smsSelect" placeholder="选择短信模板" size="mini" >
                <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-button type="text">刷新</el-button>
              <el-button type="text">模板管理</el-button>
            </el-form-item>
            <el-form-item label="可选参数：" prop="value" class="w178 mt30 btns">
              <el-button type="primary" plain>复制 商品名称</el-button>
              <span class="fl30">*操作说明：点击复制相关参数，可粘贴至内容中</span>
            </el-form-item>
            <el-form-item label="短信内容：" prop="desc1" class="w178 mt30 txt">
              <div class="flex">
                五一长假，
                <el-form-item prop="desc1">
                  <el-input clearable type="textarea" v-model="ruleForm.desc1" autosize />
                </el-form-item>&nbsp;统统八折，抢到就是赚到，分享好友香更多好礼！点击
                &nbsp;
                <el-form-item prop="desc2">
                  <el-input clearable type="textarea" v-model="ruleForm.desc2" autosize />
                </el-form-item>&nbsp;立即领取。回T退订
              </div>
            </el-form-item>
            <el-form-item label="测试发送：" prop="value" class="w178 mt30 flex phone">
              <el-input v-model="value" placeholder="输入测试发送手机号" class="clearable"></el-input>
              <el-button type="text">发送</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="activeName=='1'">
          <el-form :model="ruleForm" size="mini" ref="ruleForm" :rules="rules">
            <el-form-item label="邮件模板：" prop="smsSelect" class="w178 mt30">
              <el-select v-model="ruleForm.smsSelect" placeholder="选择邮件模板" size="mini" >
                <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-button type="text">刷新</el-button>
              <el-button type="text">模板管理</el-button>
            </el-form-item>
            <el-form-item label="可选参数：" prop="value" class="w178 mt30 btns">
              <el-button type="primary" plain>复制 商品名称</el-button>
              <span class="fl30">*操作说明：点击复制相关参数，可粘贴至内容中</span>
            </el-form-item>
            <el-form-item label="邮件标题：" prop="name" class="w178 mt30 flex">
              <el-input v-model="ruleForm.name" placeholder="五一长假，八折优惠券抢不停！"></el-input>
            </el-form-item>
            <el-form-item label="邮件内容：" prop="desc3" class="w178 mt30 txt">
              <div class="flex">
                五一长假，
                <el-form-item prop="desc3">
                  <el-input clearable type="textarea" v-model="ruleForm.desc3" autosize />
                </el-form-item>&nbsp;统统八折，抢到就是赚到，分享好友香更多好礼！点击
                &nbsp;
                <el-form-item prop="desc4">
                  <el-input clearable type="textarea" v-model="ruleForm.desc4" autosize />
                </el-form-item>&nbsp;立即领取。回T退订
              </div>
            </el-form-item>
            <el-form-item label="测试发送：" prop="value" class="w178 mt30 flex phone">
              <el-input v-model="value" placeholder="输入测试邮箱" class="clearable"></el-input>
              <el-button type="text">发送</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="save t_c mt30">
        <el-button type="primary" plain v-if="active == 1" @click="changeDialog">取消</el-button>
        <el-button type="primary" v-if="active == 1" @click="active=2">下一步</el-button>
        <el-button type="primary" plain v-if="active == 2" @click="active=1">上一步</el-button>
        <el-button type="primary" v-if="active == 2">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 自动化营销-----推送图文组件
export default {
  name: "graphic",
  components: {},

  props: {},
  data() {
    return {
      checkList: ["短信", "邮件"],
      active: 1, //初始选中
      activeName: 0,
      tabList: [
        { label: "短信", key: "0" },
        { label: "邮件", key: "1" }
      ],
      // 图文信息表单
      grapform: {
        resource: "",
        title: "",
        desc: ""
      },
      // 图文表单校验
      rulesGrapform: {
        resource: [
          { required: true, message: "请选择图文信息类型", trigger: "change" },
          { required: true, message: "请选择图文信息标题", trigger: "blur" },
          { required: true, message: "请选择图文信息内容", trigger: "blur" }
        ]
      },
      //表单规则
      ruleForm: {},
      //下拉
      tagList: [
        { id: 1, tagName: "标签1" },
        { id: 2, tagName: "标签2" },
        { id: 3, tagName: "标签3" }
      ],
      //select 值
      value: "",
      //form规则
      rules: {
        smsSelect: [
          { required: true, message: "请选择短信模板", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],

        desc1: [{ required: true, message: "请填写短信内容", trigger: "blur" }],
        desc2: [{ required: true, message: "请填写短信内容", trigger: "blur" }],
        desc3: [{ required: true, message: "请填写邮件内容", trigger: "blur" }],
        desc4: [{ required: true, message: "请填写邮件内容", trigger: "blur" }]
      },
      //短信内容
      textarea: ""
    };
  },
  methods: {
    //子关闭 标签选择弹框
    changeDialog() {
      this.$emit("changeCouponDlg", false);
    }
  },

  mounted() {}
};
</script>
<style lang="scss" scoped>
.stepset {
  ul {
    width: 460px;
  }
  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.el-checkbox {
  margin-right: 30px;
}
/deep/ .el-form {
  .el-form-item {
    margin-top: 30px;
  }
  .btns {
    .el-button {
      margin: 0 30px 0 0;
    }
  }
  .txt {
    /deep/ .el-form-item {
      margin-top: 0px;
    }
    .flex {
      line-height: 3;
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .el-textarea {
      width: auto;
    }
  }
  .phone {
    .el-form-item__content {
      display: flex;
      justify-content: flex-start;
    }
  }
}
.pt6 {
  padding-top: 6px;
}
.mr30 {
  margin-right: 30px;
}
.w300 {
  width: 300px !important;
}
</style>

